<template>
  <div>
    <div class="inquire-main">
      <div class="queryTitle">
        <p></p>
        <p>您要查询的会员</p>
      </div>
      <div class="tree">
        <ul>
          <li>
            <div class="OneBlock">
              <p>{{ initInfo.username }}</p>
              <p>￥{{ initInfo.total_money }}</p>
            </div>
            <div class="directDrive" @click="directDriveBtn(initInfo.id)">
              进入直推列表
            </div>
            <ul>
              <li v-for="(item, index) in initInfo.grade" :key="index">
                <div class="twoBlock">
                  <div>
                    <p></p>
                    <div class="twoBlock-font">
                      <p>{{ item.name }}</p>
                      <p>{{ item.total_member }}人</p>
                      <p @click="toSubordinate(item.role)">点击进入</p>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      initInfo: {}
    };
  },
  methods: {
    toSubordinate(num) {
      this.$commonJs.goPage("show", {
        role: num,
        mobile: this.$route.query.mobile
      });
    },
    directDriveBtn(id) {
      this.$commonJs.goPage("show", {
        id: id
      });
    }
  },
  created() {
    if (this.$route.query.mobile) {
      this.$ajax
        .post(this.$api.getMemberInfo, {
          mobile: this.$route.query.mobile
        })
        .then(res => {
          if (res.data.info) {
            this.$notification.error({
              message: res.data.info
            });
            this.$router.go(-1);
          } else {
            this.initInfo = res.data.list;
            if (res.data.list.total_money === null) {
              this.initInfo.total_money = 0;
            }
            this.$store.dispatch("changeSearchResult", res.data.list);
          }
        })
        .catch(err => {
          this.$notification.error({
            message: err
          });
        });
    }
  }
};
</script>

<style scoped lang="less">
#draw {
  width: 800px;
  height: 400px;
}
.goBack {
  color: @primary-color;
  cursor: pointer;
  line-height: 40px;
}
.inquire-main {
  padding: 30px 36px;
}
.queryTitle {
  .flex_content();
  align-items: center;
}
.queryTitle > p:first-child {
  width: 5px;
  height: 20px;
  background-color: #42a5fe;
  border-radius: 2px;
  margin-right: 12px;
}
.queryTitle > p:last-child {
  font-size: 24px;
  color: #323232;
}
.OneBlock {
  width: 155px;
  height: 155px;
  border-radius: 50%;
  background-image: linear-gradient(#44a6fe, #95cdff);
  color: #ffffff;
}
.OneBlock > p:first-child {
  font-size: 24px;
  margin: 48px 0 18px;
}
.OneBlock > p:last-child {
  font-size: 20px;
}
.twoBlock {
  display: flex;
  justify-content: space-between;
}
.twoBlock > div {
  width: 198px;
  height: 158px;
  box-shadow: 0px 4px 10px 0px rgba(115, 115, 115, 0.14);
  border-radius: 10px;
  color: #ffffff;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.twoBlock > div > p:first-child {
  width: 198px;
  height: 99px;
  background: linear-gradient(
    0deg,
    rgba(131, 196, 255, 1) 0%,
    rgba(66, 165, 254, 1) 100%
  );
  border-radius: 0 0 198px 198px;
  position: absolute;
}
.twoBlock-font {
  width: 198px;
  height: 158px;
  display: block !important;
  position: absolute;
  z-index: 2;
  margin: 0 !important;
  text-align: center;
}
.twoBlock-font > p:first-child {
  margin-top: 18px;
  margin-bottom: 15px;
}
.twoBlock-font > p:last-child {
  color: #42a5fe;
  font-size: 20px;
  margin-top: 40px;
  cursor: pointer;
}
.tree {
  display: flex;
  justify-content: center;
  padding: 58px 0 100px;
}
.tree ul {
  padding-top: 54px;
  position: relative;
  webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  transition: all 0.3s;
}
.tree li {
  float: left;
  list-style: none;
  text-align: center;
  position: relative;
  padding: 54px 5px 0 5px;
  webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  transition: all 0.3s;
}
/*利用::before,::after作分支线*/
.tree li::before,
.tree li::after {
  content: "";
  position: absolute;
  top: 0;
  right: 50%;
  width: 50%;
  height: 54px;
  border-top: 2px solid #b3b3b3;
}
.tree li:after {
  right: auto;
  left: 50%;
  border-left: 2px solid #b3b3b3;
}
.tree li:first-child::before,
.tree li:last-child::after {
  border: 0 none;
}
.tree li:last-child::before {
  border-right: 2px solid #b3b3b3;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
}
.tree li:first-child::after {
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
}

/*删除仅只有一个分支的分支线*/
.tree li:only-child::before,
.tree li:only-child::after {
  border: none;
}
.tree li:only-child {
  padding-top: 0;
}

/*添加仅只有一个分支的下分支线*/
.tree ul ul::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  border-left: 2px solid #b3b3b3;
  width: 0;
  height: 54px;
}
.tree div {
  display: inline-block;
  margin: 0 44px;
}

.directDrive {
  position: absolute;
  top: 60px;
  background: #ffffff;
  color: #42a5fe;
  border: 1px solid #42a5fe;
  padding: 10px 15px;
  cursor: pointer;
  border-radius: 5px;
}
.directDrive:hover {
  background: #42a5fe;
  color: #ffffff;
}
</style>
